import { memo } from 'react';
import type { FC, PropsWithChildren } from 'react';
import QueueAnim, { IAnimConfigOrArrayOrFunc } from 'rc-queue-anim';
import HomeRecommendGoods from '@/pages/Home/components/HomeRecommendGoods';
import HomeSearch from '@/pages/Home/components/HomeSearch';
import HomeSlidesContent from '@/pages/Home/components/HomeSlidesContent';
import HomeTitle from '@/pages/Home/components/HomeTitle';
import HomeTop from '@/pages/Home/components/HomeTop';

const HomePage: FC<PropsWithChildren<{}>> = () => {
  return (
    <section className={'w-[1200px] px-6 pt-4 pb-16 m-auto min-h-screen'}>
      <HomeTop />
      <QueueAnim>
        {/*标题*/}
        <div key={'title'}>
          <HomeTitle />
        </div>

        {/*搜索*/}
        <div key={'search'}>
          <HomeSearch />
        </div>

        {/*轮播图*/}
        <div key={'slider'} className={'h-[420px]'}>
          <HomeSlidesContent />
        </div>

        {/*推荐商品*/}
        <div key={'recommend'}>
          <HomeRecommendGoods />
        </div>
      </QueueAnim>
    </section>
  );
};

export default memo(HomePage);
